<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem to="/">库房</BreadcrumbItem>
      <BreadcrumbItem to="/Kuchun">库存</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">库存</h2>
  </div>

  <div class="info">
    <vxe-grid v-bind="gridOptions" >
        <template #toolbar_buttons>
        <div class="t">库房   <Select v-model="model" style="width: 118px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{
              item.label
            }}</Option>
          </Select></div>
          <vxe-input
          style="width: 280px"
            v-model="searchName"
            placeholder="请输入库房名称"
          ></vxe-input>
          <vxe-button status="primary">搜索</vxe-button>
          <div class="t"><Checkbox v-model="single">库存警告</Checkbox></div>
          
        </template>
     
      </vxe-grid>
    
  </div>
</template>

<script setup>
import { api_get_kcInfo } from '../../../../api/kufang/kucun';

import { ref, reactive, onMounted } from 'vue'

const tabList =ref({})
const getKcInfo = () => {
  api_get_kcInfo()
    .then((res) => {
      tabList.value=res.data.data.list
    })
    .catch((err) => {
    console.log(err);
  })
}
onMounted(() => {
  getKcInfo()
})
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  showFooter: true,

  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    perfect: true
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      // 自定义插槽模板
      buttons: 'toolbar_buttons'
    }
  },

    columns: [
    
    { field: 'id', title: '序号' , width: 70 ,align: "center"},
    { field: 'pruduct_name', title: '药...' , width: 40 ,showOverflow:'ellipsis'},
    { field: 'store_num', title: '库存量', width: 120  ,align: "center"},
    { field: 'unit', title: '单位' , width: 80,align: "center"},
    { field: 'store_location', title: '存放位置' },
    { field: 'last_out_time', title: '最近出库时间' , width: 150,align: "center"},
    { field: 'last_out_num', title: '最近出库量' , width: 100,align: "center"},
    { field: 'last_in_time', title: '最近入库时间' , width: 150,align: "center"},
    { field: 'last_in_num', title: '最近入库量', width: 100 ,align: "center"},
    { field: 'last_check_time', title: '最近盘点时间' , width: 150,align: "center"},
    { field: 'last_check_num', title: '最近盘点量' , width: 100,align: "center"},
    { field: 'store_room_name', title: '存储库房' , width: 100,align: "center"},
    { field: 'caozuo', title: '操作' , width: 100,align: "center"},
  ],
  data:tabList
 
})


</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  }
.primary {
  color: rgb(148, 86, 53);
}
.t{
    padding: 10px;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}
h2 {
  font-weight: normal;
  font-size: 20px;
}
</style>